<template>
  <div class="tab-first">
    <el-row class="icon-unit-box">
      <el-col :span="8">
        <t-iconunit title="访问量" desc="人次/人数" type="type1" :unit-data="unit['first']"></t-iconunit>
      </el-col>
      <el-col :span="8">
        <t-iconunit title="提交量" desc="人次/人数" type="type2" :unit-data="unit['second']"></t-iconunit>
      </el-col>
      <el-col :span="8">
        <t-iconunit title="提交率" desc="按人数计算" type="type3" :unit-data="unit['third']"></t-iconunit>
      </el-col>
    </el-row>

    <el-row v-if="$route.matched[0].name == 'minPage'" style="margin:13px 0;font-size: 13px;">
      <el-col :span="12">
        <span>
          <!-- 之后更换图标 -->
          <img src="../assets/icon-qr-666666.png" height="20" alt="export.png" style="vertical-align: top">
          页面访问来源分析
        </span>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <span>
          <a href="javascript:void(0)" class="export">
            <img src="../assets/icon-export-409EFF.png" height="20" alt="export.png">
            <span>导出Openid</span>
          </a>
        </span>
      </el-col>
    </el-row>
    <ve-ring v-if="$route.matched[0].name == 'minPage'" :data="ringData" :settings="ringSettings"></ve-ring>
    <el-row style="margin:13px 0;font-size: 13px;">
      <el-col :span="12">
        <span>
          <!-- 之后更换图标 -->
          <img src="../assets/icon-qr-666666.png" height="20" alt="export.png" style="vertical-align: top">
          页面访问来源分析
        </span>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <span>
          <a v-if="$route.matched[1].name=='minPage'" :href="`${baseUrl}/formPage/accessSource?logicId=${this.$route.params.id}&dateCount=7&export=1&__token=${token}${$route.matched[1].name=='minPage'?'&download=1':''}`" class="export">
            <img src="../assets/icon-export-409EFF.png" height="20" alt="export.png">
            <span>导出</span>
          </a>
          <a v-else :href="`${baseUrl}/formPage/accessStatistics?logicId=${this.$route.params.id}&dateCount=7&export=1&__token=${token}`" class="export">
            <img src="../assets/icon-export-409EFF.png" height="20" alt="export.png">
            <span>导出</span>
          </a>
        </span>
      </el-col>
    </el-row>
    <ve-ring v-if="$route.matched[1].name === 'minPage'" height="240px" :data="ringData" :settings="ringSettings"></ve-ring>
    <ve-line height="300px" :extend="lineData.rows.length>1?chartExtend:null" :data="lineData" :settings="lineSettings"></ve-line>

    <el-row style="margin:13px 0;font-size: 13px;">
      <el-col :span="12">共 {{page.number}} 人浏览了 {{page.persionTime}} 次</el-col>
      <el-col :span="12" style="text-align: right">
        <a
          class="export exportExcle"
          :href="`${baseUrl}/formPage/downloadAccessList?logicId=${$route.params.id}&__token=${token}`"
          target="_blank">
          导出所有访问记录
        </a>
      </el-col>
    </el-row>
    <el-table :data="list" v-loading="loading" border style="width: 100%">
      <el-table-column prop="recentAccessTime" label="最新访问时间"></el-table-column>
      <el-table-column prop="userType" label="客户类型"></el-table-column>
      <el-table-column prop="userId" label="用户ID"></el-table-column>
      <el-table-column prop="userName" label="用户昵称"></el-table-column>
      <el-table-column prop="concat" label="联系方式"></el-table-column>
      <el-table-column prop="accessNum" label="访问次数"></el-table-column>
    </el-table>
    <div class="pagination-text-right">
      <el-pagination layout="total,prev, pager, next"
                     :current-page.sync="currentPage"
                     :total="page.total" :page-size="10" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script type="text/babel">
  import IconUnit from '../components/IconUnit.vue'
  import { accessAndsubmit, accessSource, accessStatistics, accessList } from '@/service/getData'
  import env from '@/config/env'

  export default {
    data () {
      return {
        loading: false,
        unit: {
          first: '0 / 0',
          second: '0 / 0',
          third: '0.00%'
        },
        list: [],
        page: {
          number: 0,
          persionTime: 0,
          current: 1,
          pages: 1,
          size: 10,
          total: 0
        },
        currentPage: 1,
        lineData: {
          columns: ['date', 'number'],
          rows: [{date: 0, number: 0}]
        },
        lineSettings: {
          metrics: ['number'],
          dimension: ['date'],
          labelMap: {
            date: '日期',
            number: '访问量'
          }
        },
        chartExtend: {
          xAxis: {
            axisLabel: {
              rotate: 45,
              align: 'center',
              margin: 30
            }
          }
        },
        ringData: {
          columns: ['type', 'number'],
          rows: []
        },
        ringSettings: {
          dimension: 'type',
          metrics: 'number',
          hoverAnimation: false,
          radius: [80, 70],
          offsetY: 120
        }
      }
    },
    components: {
      't-iconunit': IconUnit
    },
    computed: {
      baseUrl () {
        return env.baseUrl2
      },
      token () {
        return localStorage.getItem('UBToken')
      }
    },
    methods: {
      axiosAccessAndsubmit (payload) {
        accessAndsubmit(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.unit.first = resJson.data.accessVolume.persionTime + ' / ' + resJson.data.accessVolume.number
              this.unit.second = resJson.data.submitAmount.persionTime + ' / ' + resJson.data.submitAmount.number
              this.unit.third = resJson.data.submitRate.rate
            }
          })
          .finally(() => {
            // this.loading = false;
          })
      },
      axiosAccessSource (payload) {
        accessSource(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              this.ringData.rows = []
              res.data.data.forEach(item => {
                if (item.channel) {
                  this.ringData.rows.push({
                    type: item.channel,
                    number: item.countResult
                  })
                } else {
                  this.ringData.rows.push({
                    type: '其他',
                    number: item.countResult
                  })
                }
              })
            }
          })
          .finally(() => {
            // this.loading = false;
          })
      },
      axiosAccessStatistics (payload) {
        accessStatistics(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              if (resJson.data.list.length) {
                this.lineData.rows = resJson.data.list
              }
            }
          })
          .finally(() => {
            // this.loading = false;
          })
      },
      axiosAccessList (payload) {
        this.loading = true
        accessList(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.list = resJson.data.list
              this.page = resJson.data.page
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      // 页面切换
      handleCurrentChange () {
        this.axiosAccessList({
          'logicId': this.$route.params.id,   // 微页面ID,或者表单ID
          // 'pageType': this.$route.matched[0].name == 'minPage' ? 0 : 1, //0:微页面数据 , 1:表单页面数据
          'page': this.currentPage, // 当前页
          'size': 10 // 分页条数
        })
      }

    },
    mounted () {
    },
    activated () {
      // this.init();
      this.axiosAccessAndsubmit({
        'logicId': this.$route.params.id   // 微页面ID,或者表单ID
        // 'pageType': this.$route.matched[0].name === 'minPage' ? 0 : 1 //0:微页面数据 , 1:表单页面数据*/
      })
      this.$route.matched[1].name === 'minPage' && this.axiosAccessSource({
        'logicId': this.$route.params.id  // 微页面ID
      })
      this.axiosAccessStatistics({
        'logicId': this.$route.params.id,   // 微页面ID,或者表单ID
        // 'pageType': this.$route.matched[0].name === 'minPage' ? 0 : 1, //0:微页面数据 , 1:表单页面数据
        'dateCount': 7   // 统计天数
      })
      this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">


</style>
